import React from "react";
import { lazy } from "react";
import { Navigate } from "react-router-dom";
import Login from "@/views/Login";
import Register from "@/views/Login/register";
import Home from "@/views/Layout";
const NotePage = lazy(() => import("@/views/pages/NotePage"));
const DataPage = lazy(() => import("@/views/pages/DataPage"));
const LabelPage = lazy(() => import("@/views/pages/LabelPage"));
const WebChart = lazy(() => import("@/views/pages/ChartPage"));

const withLoading = (comp: JSX.Element) => {
  return <React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>;
};

const routes = [
  {
    path: "/",
    element: <Navigate to="/login" />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "/home/note",
        element: withLoading(<NotePage />),
      },
      {
        path: "/home/data",
        element: withLoading(<DataPage />),
      },
      {
        path: "/home/label",
        element: withLoading(<LabelPage />),
      },
      {
        path: "/home/webstate",
        element: withLoading(<WebChart />),
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/registe",
    element: <Register />,
  },
];

export default routes;
